<template>
  <div class="flex" style="width: 100%; flex-direction: column; height: 100%">
    <div class="title">师资力量</div>
    <div class="flex box">
      <div style="flex: 1">
        <div ref="chartRefA" class="chart-container"></div>
      </div>
      <div style="flex: 1">
        <div ref="chartRefB" class="chart-container"></div>
      </div>
      <div style="flex: 1">
        <div ref="chartRefC" class="chart-container"></div>
      </div>
      <div style="flex: 1">
        <div ref="chartRefD" class="chart-container"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted,onUnmounted } from "vue";
import * as echarts from "echarts";
import * as leaderApi from '@/api/leaders'

let chartRefA = ref(null);
let chartA = ref(null);
let chartRefB = ref(null);
let chartB = ref(null);
let chartRefC = ref(null);
let chartC = ref(null);
let chartRefD = ref(null);
let chartD = ref(null);
const colorList = ["#00FFF0", "#00FFB2", "#faff0d"];

// 人员结构
const personnelStructure = async () => {
    leaderApi.personnelStructure().then(res => {
        console.log("personnelStructure",res);
        initChartA(res.data);
        //ref_grade_stu_statistics.value = res.data;
    });
}

// 职称分布
const jobGrade = async () => {
    leaderApi.jobGrade().then(res => {
        console.log("jobGrade",res);
        initChartB(res.data);
    });
}

// 年龄分布
const ageGroup = async () => {
    leaderApi.ageGroup().then(res => {
        initChartC(res.data);
    });
}

// 学历分布
const educationalQualification = async () => {
    leaderApi.educationalQualification().then(res => {
      console.log("educationalQualification",res);
      
        initChartD(res.data);
    });
}

const initChartA = (resData) => {
  if (chartRefA.value) {
    const existingChart = echarts.getInstanceByDom(chartRefA.value);
    if (existingChart) existingChart.dispose();
  }
  var xdata = resData.map(item => item.bzlbmc);
  var seriesData = resData.map(item => item.count);
  const option = {
    title: {
      text: "人员结构",
      top: 20,
      left: 20,
      textStyle: {
        color: "#00D1FF",
        fontSize: 15,
        lineHeight: 10,
      },
    },
    grid: {
      top: 60,
      right: 0,
      bottom: 20,
      left: 30,
      containLabel: true,
    },
    tooltip: {},
    xAxis: {
      data:xdata,
      axisLine: {
        lineStyle: {
          color: "#0094ff", // ✅ X轴线颜色
        },
      },
      axisTick: {
        lineStyle: {
          color: "#0094ff", // ✅ X轴刻度线颜色
        },
      },
      axisLabel: {
        color: "#fff",
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#00D1FF",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#0094ff",
        },
      },
      axisLabel: {
        show: true,
      },
    },
    series: [
      {
        type: "bar",
        barWidth: 29,
        data: seriesData,
        label: {
          show: true,
          position: "top",
          formatter: "{c}",
          color: "inherit",
        },
        itemStyle: {
          color: function (params) {
            return colorList[params.dataIndex % colorList.length];
          },
        },
      },
    ],
  };
  chartA.value = echarts.init(chartRefA.value);
  chartA.value.setOption(option);
};
const initChartB = (resData) => {
  if (chartRefB.value) {
    const existingChart = echarts.getInstanceByDom(chartRefB.value);
    if (existingChart) existingChart.dispose();
  }
  const colors = ["#00FFF0", "#00FFB2"];
  var xdata = resData.map(item => item.gwdjmc);
  var seriesData = resData.map(item => item.count);

  const option = {
    title: {
      text: "职称分布",
      top: 20,
      left: 20,
      textStyle: {
        color: "#00D1FF",
        fontSize: 15,
        lineHeight: 10,
      },
    },
    grid: {
      top: 60,
      right: 20,
      bottom: 20,
      left: 0,
      containLabel: true,
    },
    tooltip: {},
    xAxis: {
      type: "value",
      axisLine: {
        show: true,
        lineStyle: {
          color: "#0094ff", // ✅ X轴线颜色
        },
      },
      splitLine: {
        lineStyle: {
          color: "#0094ff",
        },
      },
      axisTick: {
        lineStyle: {
          color: "#0094ff", // ✅ X轴刻度线颜色
        },
      },
      axisLabel: {
        color: "#fff",
      },
    },
    yAxis: {
      type: "category",
      data: xdata,
      axisLine: {
        lineStyle: {
          color: "#00D1FF",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#0094ff",
        },
      },
      axisLabel: {
        show: true,
        color: "#fff",
        // rotate: 45,
        fontSize: 8,     // 设置合适的字体大小
        interval: 0,      // 显示所有标签
      },
    },
    series: [
      {
        type: "bar",
        barWidth: 5,
        data: seriesData,
        label: {
          show: true,
          position: "right",
          formatter: "{c}人",
          color: "inherit",
        },
        itemStyle: {
          color: function (params) {
            return colors[params.dataIndex % colors.length];
          },
        },
      },
    ],
  };
  chartB.value = echarts.init(chartRefB.value);
  chartB.value.setOption(option);
};
const initChartC = (resData) => {
  if (chartRefC.value) {
    const existingChart = echarts.getInstanceByDom(chartRefC.value);
    if (existingChart) existingChart.dispose();
  }
  var xdata = resData.map(item => item.ageGroup);
  var seriesData = resData.map(item => item.count);
  const option = {
    title: {
      text: "年龄分布",
      top: 20,
      left: 20,
      textStyle: {
        color: "#00D1FF",
        fontSize: 15,
        lineHeight: 10,
      },
    },
    grid: {
      top: 60,
      right: 0,
      bottom: 20,
      left: 30,
      containLabel: true,
    },
    tooltip: {},
    xAxis: {
      type: "category",
      data: xdata,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#0094ff", // ✅ X轴线颜色
        },
      },
      splitLine: {
        lineStyle: {
          color: "#0094ff",
        },
      },
      axisTick: {
        lineStyle: {
          color: "#0094ff", // ✅ X轴刻度线颜色
        },
      },
      axisLabel: {
        color: "#fff",
        interval: 0,     // 显示所有标签
        rotate: 45,      // 旋转标签避免重叠
        fontSize: 12,    // 设置合适的字体大小
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#00D1FF",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#0094ff",
        },
      },
      axisLabel: {
        show: true,
      },
    },
    series: [
      {
        type: "line",
        smooth: true,
        data: seriesData,
        lineStyle: {
          color: "#00d1ff",
        },
        symbol: "circle",
        symbolSize: 8,
        itemStyle: {
          color: "#75F9FD",
          borderWidth: 10,
          borderColor: "#00FF38",
        },
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          fontSize: 12,
          formatter: '{c}人'
        }
      },
    ],
  };
  chartC.value = echarts.init(chartRefC.value);
  chartC.value.setOption(option);
};
const initChartD = (resData) => {
  if (chartRefD.value) {
    const existingChart = echarts.getInstanceByDom(chartRefD.value);
    if (existingChart) existingChart.dispose();
  }
  var data = resData.map(item => ({value:item.count,name:item.xlmc}));
  
  const option = {
    color: ["#00ffb2", "#fff509", "#00c1ff", "#00fff1"],
    title: {
      text: "学历分布",
      top: 20,
      left: 20,
      textStyle: {
        color: "#00D1FF",
        fontSize: 15,
        lineHeight: 10,
      },
    },
    legend: {
      show: false,
    },
    series: [
      {
        type: "pie",
        radius: ["30%", "55%"],
        center: ["50%", "60%"],
        itemStyle: {
          borderRadius: 8,
        },
        label: {
          formatter: ["{a|{b}}", "{b|{c}人}"].join("\n"),
          rich: {
            a: {
              color: "#fff",
              fontSize: 10,
            },
            b: {
              color: "#fff",
              fontSize: 10,
            },
          },
        },
        data: data,
      },
    ],
  };
  chartD.value = echarts.init(chartRefD.value);
  chartD.value.setOption(option);
};

onMounted(() => {
  personnelStructure();
  jobGrade();
  ageGroup();
  educationalQualification();
  refreshDataInterval();
});

onUnmounted(() => { 
  if(ref_setInterval.value)
  {
    clearInterval(ref_setInterval.value);
    ref_setInterval.value = null;
  }
})

const ref_setInterval = ref(null);
const refreshDataInterval = () => { 
  if (import.meta.env.VITE_API_REFRESH_IsEnable == 0) {
    ref_setInterval.value = setInterval(() => {
      personnelStructure();
      jobGrade();
      ageGroup();
      educationalQualification();
    }, import.meta.env.VITE_API_REFRESH_INTERVAL);
  }
}


</script>

<style lang="scss" scoped>
.title {
  color: white;
  width: 100%;
  height: 20px;
  line-height: 20px;
  margin-bottom: 10px;
  text-align: left;
  vertical-align: middle;
  border-left: 4px solid #00a7ff;
  padding-left: 10px;
  border-radius: 2px;
}
.box {
  height: calc(100% - 30px);
  width: 100%;
  background-image: url("@/assets/images/profile/leader/bg-2.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
